import React from "react";
import { Modal, Button, Form, Input } from "antd";
import axios from "axios";
const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 20,
  },
};
export default function AddModal(props) {
  const [form] = Form.useForm();

  const handleOk = async () => {
    console.log("ok");
    try {
      const res = await form.validateFields();
      console.log(res);
      await axios.post("/addRecords", {
        ...res,
      });
      props.loadRecords();
      props.closeModal();
    } catch (e) {
      console.log(e);
    }
  };

  const handleCancel = () => {
    console.log("cancal");
    props.closeModal();
  };
  return (
    <Modal
      title="添加快捷方式"
      visible={true}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <Form form={form} {...layout} name="basic" initialValues={{}}>
        <Form.Item
          label="名称"
          name="name"
          rules={[
            {
              required: true,
              message: "名称不能为空",
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="网址"
          name="url"
          rules={[
            {
              required: true,
              message: "网址不能为空",
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
}
